<template>
  <div class="sorting-simulation-container">
    <!-- 系统配置区域 -->
    <div class="control-buttons bg-white rounded-xl shadow-lg p-6 mb-6">
      <div class="config-grid">
        <div class="config-item">
          <label for="product-types-count" class="config-label">产品种类数量:</label>
          <input id="product-types-count" v-model="productTypesCount" type="number" min="2" max="20" class="config-input" />
          <n-button type="primary" @click="applyProductTypesCount" class="config-btn">应用</n-button>
        </div>
        <div class="config-item">
          <label for="station-size" class="config-label">中转站库位数量:</label>
          <input id="station-size" v-model="stationSize" type="number" min="6" max="30" class="config-input" />
          <n-button type="primary" @click="changeStationSize" class="config-btn">应用</n-button>
        </div>
      </div>
    </div>

    <!-- 控制按钮区域 -->
    <div class="control-buttons bg-white rounded-xl shadow-lg p-6 mb-6">
      <n-button type="primary" @click="toggleAutoRun" class="control-btn" :type="isAutoRunning ? 'error' : 'success'">
        <template #icon>
          <n-icon>
            <i class="fa" :class="isAutoRunning ? 'fa-stop' : 'fa-play' "></i>
          </n-icon>
        </template>
        {{ isAutoRunning ? '停止自动运行' : '开始自动运行' }}
      </n-button>
      <n-button type="primary" secondary @click="stepRun" :disabled="isReSorting || isAutoRunning" class="control-btn">
        <template #icon>
          <n-icon>
            <i class="fa fa-step-forward"></i>
          </n-icon>
        </template>
        单步运行
      </n-button>
      <n-button type="error" @click="resetSimulation" class="control-btn">
        <template #icon>
          <n-icon>
            <i class="fa fa-refresh"></i>
          </n-icon>
        </template>
        重置模拟
      </n-button>
      <n-button type="info" @click="forceReSort" :disabled="isReSorting" class="control-btn">
        <template #icon>
          <n-icon>
            <i class="fa fa-random"></i>
          </n-icon>
        </template>
        强制出库
      </n-button>
      <n-button type="warning" @click="toggleProductGenerationMode" class="control-btn">
        <template #icon>
          <n-icon>
            <i class="fa fa-exchange"></i>
          </n-icon>
        </template>
        {{ productGenerationMode === 'random' ? '随机生成' : '顺序生成' }}
      </n-button>
    </div>

    <!-- 产品存储区域 -->
    <div class="storage-areas mb-6">
      <!-- 生产线区域 -->
      <div class="production-line-container">
        <!-- 产品生成缓冲区 -->
        <div class="storage-section production-component">
          <h3 class="storage-title">产品生成缓冲区</h3>
          <div class="storage-grid-same-size">
            <div
              v-for="(product, index) in production"
              :key="index"
              class="storage-location"
              :class="[{ empty: !product }, product ? `product-${product}` : '']"
              :style="product ? { backgroundColor: getProductColor(product) } : {}"
            >{{ product || '' }}</div>
            <div v-for="index in 3 - production.length" :key="`empty-${index}`" class="storage-location empty"></div>
          </div>
        </div>

        <!-- 产线AGV区域 -->
        <div class="storage-section production-component">
          <h3 class="storage-title">产线AGV</h3>
          <div class="storage-grid-same-size">
            <div
              v-for="(product, index) in production_AGV1"
              :key="index"
              class="storage-location"
              :class="[{ empty: !product }, product ? `product-${product}` : '']"
              :style="product ? { backgroundColor: getProductColor(product) } : {}"
            >{{ product || '' }}</div>
            <div v-for="index in 3 - production_AGV1.length" :key="`empty-${index}`" class="storage-location empty"></div>
          </div>
        </div>

        <!-- 分拣台 -->
        <div class="storage-section production-component">
          <h3 class="storage-title">分拣台</h3>
          <div class="storage-grid-same-size">
            <div
              v-for="(product, index) in sortingStation"
              :key="index"
              class="storage-location"
              :class="[{ empty: !product }, product ? `product-${product}` : '']"
              :style="product ? { backgroundColor: getProductColor(product) } : {}"
            >{{ product || '' }}</div>
            <div v-for="index in 3 - sortingStation.length" :key="`empty-${index}`" class="storage-location empty"></div>
          </div>
        </div>
      </div>

      <!-- 中转站 -->
      <div class="storage-section mb-6">
        <h3 class="storage-title">中转站</h3>
        <div class="transfer-station">
          <div
            v-for="(product, index) in transferStation"
            :key="index"
            class="storage-location"
            :class="[{ empty: !product }, product ? `product-${product}` : '']"
            :style="product ? { backgroundColor: getProductColor(product) } : {}"
          >
            <span v-if="product">{{ product }}</span>
            <div class="location-index">{{ index + 1 }}</div>
          </div>
        </div>
      </div>

      <!-- 出货区 -->
      <div class="production-line-container">
        <!-- 分拣AGV -->
        <div class="storage-section production-component">
          <h3 class="storage-title">分拣AGV</h3>
          <div class="storage-grid-same-size">
            <div
              v-for="(product, index) in sorting_AGV"
              :key="index"
              class="storage-location"
              :class="[{ empty: !product }, product ? `product-${product}` : '']"
              :style="product ? { backgroundColor: getProductColor(product) } : {}"
            >{{ product || '' }}</div>
            <div v-for="index in 3 - sorting_AGV.length" :key="`empty-${index}`" class="storage-location empty"></div>
          </div>
        </div>

        <!-- 翻转台设备 -->
        <div class="storage-section production-component">
          <h3 class="storage-title">翻转台设备</h3>
          <div class="storage-grid-same-size">
            <div
              v-for="(product, index) in flip_station"
              :key="index"
              class="storage-location"
              :class="[{ empty: !product }, product ? `product-${product}` : '']"
              :style="product ? { backgroundColor: getProductColor(product) } : {}"
            >{{ product || '' }}</div>
            <div v-for="index in 3 - flip_station.length" :key="`empty-${index}`" class="storage-location empty"></div>
          </div>
        </div>

        <!-- 中继AGV -->
        <div class="storage-section production-component">
          <h3 class="storage-title">中继AGV</h3>
          <div class="storage-grid-same-size">
            <div
              v-for="(product, index) in flip_AGV"
              :key="index"
              class="storage-location"
              :class="[{ empty: !product }, product ? `product-${product}` : '']"
              :style="product ? { backgroundColor: getProductColor(product) } : {}"
            >{{ product || '' }}</div>
            <div v-for="index in 3 - flip_AGV.length" :key="`empty-${index}`" class="storage-location empty"></div>
          </div>
        </div>
      </div>

      <!-- 出库箭头指示 -->
      <div class="outbound-arrow text-center my-4">
        <i class="fa fa-long-arrow-down text-2xl text-gray-500"></i>
      </div>

    </div>

    <!-- 模拟信息区域 -->
    <div class="info-section grid grid-cols-1 md:grid-cols-3 gap-6 mb-6">
      <div class="info-card bg-white rounded-xl shadow-lg p-6">
        <h3 class="info-title">基本信息</h3>
        <div class="info-grid">
          <div class="info-item">
            <span class="info-label">重新分拣次数:</span>
            <span class="info-value">{{ reSortCount }}</span>
          </div>
          <div class="info-item">
            <span class="info-label">中转站空库位数量:</span>
            <span class="info-value">{{ emptySlots }}</span>
          </div>
          <div class="info-item">
            <span class="info-label">已出库产品:</span>
            <span class="info-value">{{ shippedProducts.length }}</span>
          </div>
        </div>
      </div>

      <div class="info-card bg-white rounded-xl shadow-lg p-6">
        <h3 class="info-title">当前状态</h3>
        <div class="info-grid">
          <div class="info-item">
            <span class="info-label">自动运行:</span>
            <span class="info-value" :class="isAutoRunning ? 'status-running' : 'status-stopped'">{{ isAutoRunning ? '运行中' : '已停止' }}</span>
          </div>
          <div class="info-item">
            <span class="info-label">重新分拣:</span>
            <span class="info-value" :class="isReSorting ? 'status-running' : 'status-stopped'">{{ isReSorting ? '进行中' : '已完成' }}</span>
          </div>
          <div class="info-item">
            <span class="info-label">系统状态:</span>
            <span class="info-value status-normal">正常</span>
          </div>
        </div>
      </div>

      <div class="info-card bg-white rounded-xl shadow-lg p-6">
        <h3 class="info-title">产品分布</h3>
        <div class="product-distribution">
          <div v-for="(stat, product) in productStats" :key="product" class="product-dist-item">
            <div class="product-color-indicator" :style="{ backgroundColor: stat.color }"></div>
            <span class="product-label">{{ product }}</span>
            <span class="product-count">{{ stat.total }}</span>
          </div>
        </div>
      </div>


    </div>

    <!-- 统计信息 -->
    <div class="stats-section bg-white rounded-xl shadow-lg p-6 mb-6">
      <h2 class="section-title">产品统计信息</h2>
      <div class="stats-grid">
        <div v-for="(stat, product) in productStats" :key="product" class="stat-card">
          <div class="stat-header">
            <div class="stat-color" :style="{ backgroundColor: stat.color }"></div>
            <span class="stat-product">{{ product }}</span>
          </div>
          <div class="stat-body">
            <div class="stat-item">
              <span class="stat-label">在中转站:</span>
              <span class="stat-value">{{ stat.in_transfer_station }}</span>
            </div>
            <div class="stat-item">
              <span class="stat-label">已出库:</span>
              <span class="stat-value shipped">{{ stat.shipped }}</span>
            </div>
            <div class="stat-item">
              <span class="stat-label">总计:</span>
              <span class="stat-value total">{{ stat.total }}</span>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 日志区域 -->
    <div class="logs-section bg-white rounded-xl shadow-lg p-6">
      <h2 class="section-title">操作日志</h2>
      <div class="logs-container">
        <div v-for="(log, index) in logs" :key="index" class="log-entry">
          <span class="log-time">{{ log.time }}</span>
          <span class="log-message">{{ log.message }}</span>
        </div>
      </div>
    </div>

    <!-- 重新分拣提醒弹窗 -->
    <n-modal v-model:show="showReSortModal" title="正在重新分拣产品" :mask-closable="false" :closable="false">
      <div class="re-sort-modal-content">
        <div class="re-sort-header">
          <div class="re-sort-product-color" :style="{ backgroundColor: currentReSortProductColor }"></div>
          <h3 class="re-sort-title">正在重新分拣产品 {{ currentReSortProduct }}</h3>
        </div>
        <p class="re-sort-description">检测到产品 {{ currentReSortProduct }} 数量达到3个，正在进行重新分拣以加速出库...</p>
        <div class="re-sort-loading">
          <i class="fa fa-refresh fa-spin text-3xl text-gray-500"></i>
        </div>
      </div>
    </n-modal>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from "vue";
import { NButton, NIcon, NModal } from "naive-ui";
import axios from "axios";
import { API_URLS } from '../../utils/apiConfig';

// 使用配置文件中的API地址
const API_BASE_URL = API_URLS.luosi.base;

// 响应式状态
const production = ref([]); // 产品缓冲区
const production_AGV1 = ref([]); // 产线AGV1
const sortingStation = ref([]); // 分拣台
const sorting_AGV = ref([]); // 分拣台AGV
const flip_station = ref([]); // 翻转台
const transferStation = ref([]); // 中转站
const flip_AGV = ref([]); // 中继AGV
const shippedProducts = ref([]);
const logs = ref([]);
const productStats = ref({});
const isAutoRunning = ref(false);
const isReSorting = ref(false);
const reSortCount = ref(0);
const emptySlots = ref(0);
const productTypesCount = ref(8);
const stationSize = ref(15);
const showReSortModal = ref(false);
const currentReSortProduct = ref("");
const currentReSortProductColor = ref("");
const productGenerationMode = ref("random"); // 产品生成模式: random 或 sequence

// 定时器
let autoRunInterval = null;
let lastState = null;

// 获取产品颜色
const getProductColor = (product) => {
  if (productStats.value[product]) {
    return productStats.value[product].color;
  }
  return "#E5E7EB";
};

// 获取模拟状态
const fetchSimulationState = async () => {
  try {
    const response = await axios.get(`${API_BASE_URL}/state`);
    const data = response.data;

    production.value = data.production || [];
    production_AGV1.value = data.production_AGV1 || [];
    sortingStation.value = data.sorting_station || [];
    sorting_AGV.value = data.sorting_AGV || [];
    flip_station.value = data.flip_station || [];
    flip_AGV.value = data.flip_AGV || [];
    transferStation.value = data.transfer_station || Array(15).fill(null);
    shippedProducts.value = data.shipped_products || [];
    logs.value = data.logs || [];
    productStats.value = data.product_stats || {};
    isAutoRunning.value = data.is_auto_running || false;
    isReSorting.value = data.is_re_sorting || false;
    reSortCount.value = data.re_sort_count || 0;
    emptySlots.value = data.empty_slots || 12;
    productGenerationMode.value = data.product_generation_mode || "random";
    stationSize.value = data.station_size || 15;
    productTypesCount.value = data.product_types_count || 8;

    // 更新lastState
    lastState = {
      shippedProductsLength: shippedProducts.value.length,
      reSortCount: reSortCount.value,
    };

    // 更新重新分拣弹窗
    if (isReSorting.value && !showReSortModal.value) {
      // 找出数量最多的产品
      const maxProduct = Object.entries(productStats.value).sort(([, a], [, b]) => b.in_transfer_station - a.in_transfer_station)[0];

      if (maxProduct) {
        currentReSortProduct.value = maxProduct[0];
        currentReSortProductColor.value = maxProduct[1].color;
        showReSortModal.value = true;
      }
    } else if (!isReSorting.value && showReSortModal.value) {
      showReSortModal.value = false;
    }
  } catch (error) {
    console.error("获取模拟状态失败:", error);
    // 添加错误日志到本地状态
    const errorLog = {
      time: new Date().toTimeString().split(" ")[0],
      message: `获取模拟状态失败: ${error.message || "未知错误"}`,
    };
    if (!logs.value.some((log) => log.message === errorLog.message)) {
      logs.value.push(errorLog);
    }
  }
};

// 强制重新分拣
const forceReSort = async () => {
  try {
    await axios.post(`${API_BASE_URL}/force-re-sort`);
    await fetchSimulationState();
  } catch (error) {
    console.error("强制重新分拣失败:", error);
    const errorLog = {
      time: new Date().toTimeString().split(" ")[0],
      message: `强制重新分拣失败: ${error.message || "未知错误"}`,
    };
    if (!logs.value.some((log) => log.message === errorLog.message)) {
      logs.value.push(errorLog);
    }
  }
};

// 重置模拟
const resetSimulation = async () => {
  try {
    await axios.post(`${API_BASE_URL}/reset`);
    sortingStation.value = [];
    await fetchSimulationState();
  } catch (error) {
    console.error("重置模拟失败:", error);
    const errorLog = {
      time: new Date().toTimeString().split(" ")[0],
      message: `重置模拟失败: ${error.message || "未知错误"}`,
    };
    if (!logs.value.some((log) => log.message === errorLog.message)) {
      logs.value.push(errorLog);
    }
  }
};

// 切换自动运行
const toggleAutoRun = async () => {
  try {
    await axios.post(`${API_BASE_URL}/toggle-auto-run`);
    await fetchSimulationState();

    if (isAutoRunning.value) {
      startAutoRun();
    } else {
      stopAutoRun();
    }
  } catch (error) {
    console.error("切换自动运行失败:", error);
    const errorLog = {
      time: new Date().toTimeString().split(" ")[0],
      message: `切换自动运行失败: ${error.message || "未知错误"}`,
    };
    if (!logs.value.some((log) => log.message === errorLog.message)) {
      logs.value.push(errorLog);
    }
  }
};

// 单步运行
const stepRun = async () => {
  try {
    await axios.post(`${API_BASE_URL}/step-run`);
    await fetchSimulationState();
  } catch (error) {
    console.error("单步运行失败:", error);
    const errorLog = {
      time: new Date().toTimeString().split(" ")[0],
      message: `单步运行失败: ${error.message || "未知错误"}`,
    };
    if (!logs.value.some((log) => log.message === errorLog.message)) {
      logs.value.push(errorLog);
    }
  }
};

// 改变中转站大小
const changeStationSize = async () => {
  try {
    await axios.post(`${API_BASE_URL}/change-station-size`, null, {
      params: { size: stationSize.value },
    });
    await fetchSimulationState();
  } catch (error) {
    console.error("改变中转站大小失败:", error);
    const errorLog = {
      time: new Date().toTimeString().split(" ")[0],
      message: `改变中转站大小失败: ${error.message || "未知错误"}`,
    };
    if (!logs.value.some((log) => log.message === errorLog.message)) {
      logs.value.push(errorLog);
    }
  }
};

// 应用产品种类数量
const applyProductTypesCount = async () => {
  try {
    // 先发送请求更新后台的产品种类数量
    await axios.post(`${API_BASE_URL}/change-product-types-count`, null, {
      params: { count: productTypesCount.value },
    });
    // 然后重置模拟以应用新的产品种类数量
    await resetSimulation();
    const infoLog = {
      time: new Date().toTimeString().split(" ")[0],
      message: `产品种类数量已设置为${productTypesCount.value}，系统已重置`,
    };
    logs.value.push(infoLog);
  } catch (error) {
    console.error("应用产品种类数量失败:", error);
    const errorLog = {
      time: new Date().toTimeString().split(" ")[0],
      message: `应用产品种类数量失败: ${error.message || "未知错误"}`,
    };
    if (!logs.value.some((log) => log.message === errorLog.message)) {
      logs.value.push(errorLog);
    }
  }
};

// 开始自动运行
const startAutoRun = () => {
  if (autoRunInterval) {
    clearInterval(autoRunInterval);
  }

  autoRunInterval = setInterval(async () => {
    if (!isReSorting.value) {
      await stepRun();
    }
  }, 800); // 每2秒运行一次
};

// 停止自动运行
const stopAutoRun = () => {
  if (autoRunInterval) {
    clearInterval(autoRunInterval);
    autoRunInterval = null;
  }
};

// 切换产品生成模式
const toggleProductGenerationMode = async () => {
  try {
    await axios.post(`${API_BASE_URL}/toggle-product-generation-mode`);
    await fetchSimulationState();
  } catch (error) {
    console.error("切换产品生成模式失败:", error);
    const errorLog = {
      time: new Date().toTimeString().split(" ")[0],
      message: `切换产品生成模式失败: ${error.message || "未知错误"}`,
    };
    if (!logs.value.some((log) => log.message === errorLog.message)) {
      logs.value.push(errorLog);
    }
  }
};

// 组件挂载时初始化
onMounted(async () => {
  // 初始化日志
  logs.value = [{ time: new Date().toTimeString().split(" ")[0], message: "系统准备就绪" }];
  // 初始化中转站
  transferStation.value = Array(15).fill(null);

  await fetchSimulationState();

  // 如果自动运行已经开启，启动定时器
  if (isAutoRunning.value) {
    startAutoRun();
  }
});

// 组件卸载时清理
onUnmounted(() => {
  stopAutoRun();
});
</script>

<style scoped>
.sorting-simulation-container {
  padding: 20px;
  background-color: #f9fafb;
  min-height: 100vh;
}

.header {
  text-align: center;
  margin-bottom: 2rem;
}

.title {
  font-size: 2rem;
  font-weight: bold;
  color: #1f2937;
  margin-bottom: 0.5rem;
}

.subtitle {
  font-size: 1.1rem;
  color: #6b7280;
}

.config-section,
.control-buttons,
.info-section,
.storage-areas,
.stats-section,
.logs-section {
  margin-bottom: 2rem;
}

.section-title {
  font-size: 1.5rem;
  font-weight: 600;
  color: #1f2937;
  margin-bottom: 1rem;
  display: flex;
  align-items: center;
}

.section-title i {
  margin-right: 0.5rem;
  color: #6b7280;
}

.config-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

.config-item {
  display: flex;
  align-items: center;
}

.config-label {
  width: 120px;
  color: #4b5563;
}

.config-input {
  width: 60px;
  padding: 0.5rem;
  border: 1px solid #d1d5db;
  border-radius: 0.375rem;
  text-align: center;
}

.config-btn {
  margin-left: 0.5rem;
}

.control-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: center;
}

.control-btn {
  flex: 0 0 auto;
  min-width: 120px;
}

.info-section {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}

@media (min-width: 768px) {
  .info-section {
    grid-template-columns: 1fr 1fr 1fr;
  }
}

.info-card {
  padding: 1.5rem;
  background-color: white;
  border-radius: 0.75rem;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
}

.info-title {
  font-size: 1.25rem;
  font-weight: 600;
  color: #1f2937;
  margin-bottom: 1rem;
}

.info-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.75rem;
}

.info-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.info-label {
  color: #6b7280;
}

.info-value {
  font-weight: 600;
  color: #1f2937;
}

.status-running {
  color: #10b981;
}

.status-stopped {
  color: #6b7280;
}

.status-normal {
  color: #3b82f6;
}

.product-distribution {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.product-dist-item {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  margin-bottom: 0.25rem;
}

.product-color-indicator {
  width: 12px;
  height: 12px;
  border-radius: 50%;
}

.product-label {
  font-weight: 500;
  color: #4b5563;
}

.product-count {
  color: #6b7280;
  font-size: 0.875rem;
}

.storage-section {
  background-color: white;
  border-radius: 0.75rem;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
  padding: 1.5rem;
  margin-bottom: 1.5rem;
}

.storage-title {
  font-size: 1.25rem;
  font-weight: 600;
  color: #1f2937;
  margin-bottom: 1rem;
}

.storage-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.75rem;
}

.transfer-station {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
  gap: 0.5rem;
}

.storage-location {
  width: 60px;
  aspect-ratio: 1;
  min-height: 30px;
  border-radius: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  font-size: 1.25rem;
  color: white;
  position: relative;
  transition: all 0.3s ease;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
}

.storage-location.empty {
  width: 60px;
  height: 60px;
  background-color: #e5e7eb;
  border: 2px dashed #9ca3af;
}

.location-index {
  position: absolute;
  bottom: -10px;
  right: -10px;
  background-color: white;
  color: #6b7280;
  font-size: 0.75rem;
  font-weight: normal;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}

/* 生产线相关样式 */
.production-line-container {
  display: flex;
  gap: 1.5rem;
  margin-bottom: 1.5rem;
}

.production-component {
  flex: 1;
  margin-bottom: 0;
}

.storage-grid-same-size {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
  gap: 0.5rem;
}

.outbound-arrow {
  text-align: center;
  margin: 1rem 0;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 1rem;
}

.stat-card {
  background-color: #f3f4f6;
  border-radius: 0.5rem;
  padding: 1rem;
  transition: all 0.3s ease;
}

.stat-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

.stat-header {
  display: flex;
  align-items: center;
  margin-bottom: 0.75rem;
}

.stat-color {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  margin-right: 0.5rem;
}

.stat-product {
  font-weight: 600;
  color: #1f2937;
}

.stat-body {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.stat-item {
  display: flex;
  justify-content: space-between;
  font-size: 0.875rem;
}

.stat-label {
  color: #6b7280;
}

.stat-value {
  font-weight: 600;
  color: #1f2937;
}

.stat-value.shipped {
  color: #10b981;
}

.stat-value.total {
  color: #3b82f6;
}

.logs-container {
  background-color: #f3f4f6;
  border-radius: 0.5rem;
  padding: 1rem;
  max-height: 300px;
  overflow-y: auto;
  font-size: 0.875rem;
}

.log-entry {
  display: flex;
  margin-bottom: 0.5rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid #e5e7eb;
}

.log-entry:last-child {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}

.log-time {
  color: #6b7280;
  margin-right: 0.75rem;
  min-width: 70px;
}

.log-message {
  color: #374151;
  flex: 1;
}

.re-sort-modal-content {
  text-align: center;
  padding: 1rem;
}

.re-sort-header {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1rem;
}

.re-sort-product-color {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  margin-right: 0.75rem;
}

.re-sort-title {
  font-size: 1.25rem;
  font-weight: 600;
  color: #1f2937;
}

.re-sort-description {
  color: #6b7280;
  margin-bottom: 1.5rem;
}

.re-sort-loading {
  text-align: center;
}


</style>
